body
{
	margin: 0 auto; /* ipotizzando che sia centrato all'interno della pagina */
    padding: 0;
    
	background-color:#fff;

	font-family:Verdana, Helvetica, Arial;
	font-size:15px;
	line-height:24px;
	color:#555;
}





/* ------------------------------------------------------ */
/* --- GESTIONE MENU e VOCI MENU ------------------------ */
/* ------------------------------------------------------ */
			#Div-Menu
			{
				position:fixed;
				width:90px;
				height:60px;
				top:10px;
				left:20px;				
				
				z-index:91;
				/*
				transition-property: height; /*standard* /
				transition-duration: 1s;
				 
				-webkit-transition-property: height;/*Safari e Chrome * /
				-webkit-transition-duration: 1s;  
				         
				-o-transition-property: height;      /*Opera* /
				-o-transition-duration: 1s; 
				  
				-moz-transition-property: height;    /*Firefox* /
				-moz-transition-duration: 1s;*/  
			}
			/*#Div-Menu:hover{
				height:300px;
			}*/
				



	
			#VociMenu{
				display:none;
				position:fixed;

				z-index:92;		
				
				width:300px;		
				top: 15px;		
				left: 110px;
				
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;  
			}	

						#VociMenu ul{
							list-style:none;
							margin:0 auto;
							padding:0;	
							
							cursor:pointer;
							
							-webkit-box-sizing: border-box;
							-moz-box-sizing: border-box;
							box-sizing: border-box; 						
						}	
						
									#VociMenu li{
										width:100%;
										margin:1px 0 1px 0;
										padding:6px;				
										text-align:left;
										

										opacity: 0.96;
										background-color:#000;

										-webkit-box-sizing: border-box;
										-moz-box-sizing: border-box;
										box-sizing: border-box; 				
									}		




/* ------------------------------------------------------ */
/* --- GESTIONE ELEMENTI COMUNI ------------------------- */
/* ------------------------------------------------------ */
			a:link, a:visited{
				font-family: Verdana, Helvetica, Arial;
				font-size: 20px;
				color:#FFF;
				text-decoration:none;
			}		
			a:hover{
				font-family: Verdana, Helvetica, Arial;
				font-size: 20px;
				color:#da1d24;
				text-decoration:none;
			}	





			.spaziatura-menu, .spaziatura-bassa, .spaziatura-alta, .spazio-col, .spazio-img, .spaziatura-colonne
			{
				display:block;

				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box; 				
			}
			.spaziatura-menu, .spaziatura-alta{height:60px;}
			.spaziatura-bassa{height:20px;}			
						
			.spazio-img, .spazio-col, .spaziatura-colonne{width:20px;}


			/*.spazio-img{border:solid 1px black;}*/


			.bordo{border: solid 1px #DDD;}
			.bordo-alto, .bordo-basso{margin:0 10% 0 10%;}	
			.bordo-alto{border-top:solid 1px #DDD;}	
			.bordo-basso{border-bottom:solid 1px #DDD;}				





			.testo-piccolo{font-size:8px;}





/* --------------------------------------------------------- */
/* --- GESTIONE ELEMENTI PAGINE ---------------------------- */
/* --------------------------------------------------------- */
#contenitore
{
	width:100%;
	
	margin: 0 auto;
	text-align:center;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 	
}
	
	
	
	

/* --------------------------------------- INIZIO GESTIONE SEZIONE --------------------------------------------- */




	
			.sezione-flex, .sez-bottom
			{
				display: -webkit-flex;
				display: flex;
				-webkit-align-items: flex-start;
						align-items: flex-start;
				-webkit-justify-content: center;
						justify-content: center;

				width:100%;
				padding-left:20px;
				padding-right:20px;
				

				/* giustifica il contenuto all'interno della flex-box*/
				-webkit-justify-content: space-around;
				justify-content: space-around;

				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box; 			
			}
			.sez-flex-left
			{
				-webkit-justify-content: flex-start;
						justify-content: flex-start;
			}			
			.sez-bottom
			{
				border-top:solid 1px #AAA; 
				background-color:#000; 
				padding-top:12px;
				padding-bottom:12px;
				
				color:#EEE; 
				font-size:10px; 
				line-height:16px;
			}
				.sez-bottom titoli
				{
					font-size:13px;
					font-weight:bold;
				}			
				.sez-bottom a
				{
					font-size:11px;
				}

					



/* --------------------------------------- INIZIO GESTIONE COLONNE --------------------------------------------- */





					/*	Formatta il Div per creare la 
						PAGINA CON FORMATTAZIONE ORIZZONTALE IMMAGINE/TESTO ALTERNATE  
						ricordati di inserire la giustificazione del testo t-left t-right t-center t-giustificato.
						Serve per usare div-img img-sx img-dx per posizionare un'immagine flottante all'interno del testo
						--- va usata solo questa colonna all'interno della sezione ---
					*/
					.colonna-unica-testo
					{
						display:block;
						width:100%;
						max-width:1200px;
						vertical-align:top;
					

/*border: solid 1px red;*/
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box; 				
					}	

					.stile-titolo{color:#7e0202; font-weight:bold; font-size:20px;}
					.padding-titolo{padding-bottom:20px;}



					/*
						Eventuale contenitore per multi-colonne .colonna
						oppure colonna unica Flex
					*/
					.colonna-flex, .contenitore-flex
					{
						display: -webkit-flex;
						display: flex;
						
						/*allineamento verticale*/
						-webkit-align-items: flex-start;
								align-items: flex-start;
						
/*border: solid 1px red;*/
						width:100%;
						max-width:1200px;						
						
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box; 			
					}
						/* Allinea tutte le colonne/box flex verticalmente alla stessa altezza*/
						.allinea-col-flex
						{
							flex-flow: row nowrap;
							-webkit-flex-flow: row nowrap; /* imposta a riga e non permette alla riga di andare a capo*/
							align-items: stretch; /* espande verticalmente per tutto il contenitore*/
							-webkit-align-items: stretch;
						}				
						/* Allinea tutte le colonne/box a sinistra*/	
						.orizzontale-sx-flex
						{
							/*allineamento orizzontale*/		
							-webkit-justify-content: left;
									justify-content: left;
						}				
						/* Allinea tutte le colonne/box a destra*/	
						.orizzontale-dx-flex
						{
							/*allineamento orizzontale*/		
							-webkit-justify-content: right;
									justify-content: right;
						}		
						.giustifica-intorno-flex
						{
							/* giustifica il contenuto all'interno della flex-box */
							-webkit-justify-content: space-around;
							justify-content: space-around;
						}	
						.giustifica-tra-flex
						{
							/* giustifica il contenuto all'interno della flex-box */
							justify-content: space-between; /*space-around;*/
							-webkit-justify-content: space-between; /*space-around;*/
						}							
						/** Giustifica verticalmente il contenuto: in basso */
						.giustifica-bottom-flex
						{
							/* giustifica il contenuto all'interno della flex-box */
							-webkit-align-items: flex-end;
							align-items: flex-end;
						}		


									/* --- GESTIONE MULTI-COLONNE ---------------------------- */
									.colonna
									{
										/*	uguale a static (valore di default) 
											ma aggiunge proprieta top, right, bottom, e left*/
										position:relative; 
										
										vertical-align:top;
										
										-webkit-flex: 1;
												flex: 1;
										
				/*border: solid 1px green;*/
										
										width:100%;
										min-width:230px;
										max-width:1200px;
										

										-webkit-box-sizing: border-box;
										-moz-box-sizing: border-box;
										box-sizing: border-box; 	
									}
										.allineamento-t{text-align:left;}
										.allineamento-dati{text-align:left;}
										.allineamento-dati-dx, .t-dx{text-align:right;}
										.t-sx{text-align:left;}
										.t-cx{text-align:center;}
										.t-gx{text-align:justify;}						
										.padding-dx{padding: 0 20px 0 0;}							
										.padding-sx{padding: 0 0 0 20px;}	

										.col-2{
												width:50%;
												max-width:600px;
											  }
										.col-3{
												width:33%;
												max-width:400px;					      
											  }
										.col-4{
												width:25%;
												max-width:285px;					      
											  }
										.flex-verticale
										{
											display: flex;
											display: -webkit-flex;
											flex-direction: column;
											-webkit-flex-direction: column;
										}
									.nascondi-scorrimento{overflow:hidden;}/*permette di nascondere la parte che scorre*/
									
									/*	permette di dare un'altezza fissa al box contenente la scheda con i vari elementi
										per eventuali effetti di scorrimento */					
									.altezza-box-auto, .altezza-box{height:240px;} 
									
									



									/* box riempitivo nel caso si volesse avere i box allineati a DX o a SX */
									/* se flex-direction: column crea spazio tra un div e l'altro in verticalmente */
									.box-vuoto
									{
										-webkit-flex: 1;
												flex: 1;
										width:100%;
										min-width:1px;
										height:100%;
										min-height:1px;
			/*border:solid 1px red;*/
									}
										
						
						
						
/* ESEMPIO EFFETTO */
/*http://www.extrowebsite.com/blog/effetti-interattivi-sulle-immagini-con-css3*/
									.box-auto
									{
										display: -webkit-flex;
										display: flex;	
										
										-webkit-align-items: flex-start;
										align-items: flex-start;	
											
										-webkit-justify-content: center;
												justify-content: center;
												
										/*tutti i div all interno vengono posizionati verticalmente*/		
										flex-direction: column;
										-webkit-flex-direction: column;																							
																			
										position:absolute; 
										bottom:0; 
										margin:auto 0 0 0; 
										
										width:100%;	
										height:100%;		
/*border:solid 2px green;*/
										-webkit-box-sizing: border-box;
										-moz-box-sizing: border-box;
										box-sizing: border-box; 
										
										
										-webkit-transition: 0.8s;
										-moz-transition: 0.8s;
										-o-transition: 0.8s;
										transition: 0.8s;										
													
									}						
									.box-auto:hover 
									{
										/* escursione del box verso l'alto */
										/* top:-180px; */
										padding-bottom:120px;
									}						

									/*.box-auto >*/ #box-nascondi 
									{
										display:flex;
										
										-webkit-justify-content: center;
												justify-content: center;										
												
										-webkit-align-items: flex-end;
										align-items: flex-end;	
																				
										width:100%;	
										height:100%;	
										
										cursor:pointer;	
	/*border:solid 1px green;*/
										-webkit-box-sizing: border-box;
										-moz-box-sizing: border-box;
										box-sizing: border-box; 
										
										/*opacity: 0;
										-webkit-transition: 0.2s linear;
										-moz-transition: 0.2s linear;
										-o-transition: 0.2s linear; 
										transition: 0.2s linear;*/										
									}							
									/*.box-auto > #box-nascondi:hover{ opacity:1; }	*/
									
									#modello-auto						      
									{
										position:absolute; 
										bottom:0; 
										left:0; 
										width:100%; 
										height:26px; 
										
										background-color:#002f5e; 
										color:#FFF;	
										
										cursor:pointer;	
									}
					    	/* -------------------------------------------------- */
							/* --- GESTIONE IMMAGINI ---------------------------- */
							/* -------------------------------------------------- */
							.box-img-auto, .box-img-scheda
							{
								width:100%; 
								margin:0 0 auto 0;
/*border:solid 2px orange;*/
							}
							
							.img{width:100%;}
							
								.div-img-flex, .div-img-link, .div-img, .div-img-list
								{
									-webkit-box-sizing: border-box;
									-moz-box-sizing: border-box;
									box-sizing: border-box; 					
								}								
								
								.div-img-flex
								{
									display: -webkit-flex;
									display: flex;
									-webkit-align-items: center;
											align-items: center;
									-webkit-justify-content: center;
											justify-content: center;
															
									width:100%;
									max-width:1200px;
								}
								
								
								/* --- utilizzato solo in PassaggioDati.vb per elenco immagini/album --- */
								.div-img-list
								{
									display:inline-block;
			
									max-width:25%;
									min-width:235px;
									/*margin:10px 20px 10px 0;*/

									border:solid 1px red;/*#DDD;*/
								}	
								
													
								/* div contenitore dei link immagini social */
								.div-img-link
								{
									display:inline-block;
									
									width:60px;
									margin:0 20px 0 0;
								}									
								
								
								/* IMG PER PAGINA CON FORMATTAZIONE ORIZZONTALE IMMAGINE/TESTO ALTERNATE */							
								.div-img
								{
									width:50%;
									
									/*margin-right:20px;*/
								}	
								/* posiziona un'immagine (div-img) a sinistra del contenuto di un box (colonna-unica-testo)*/
								.img-sx{float:left;margin-right:20px;}
								/* posiziona un'immagine (div-img) a destra del contenuto di un box (colonna-unica-testo)*/
								.img-dx{float:right;margin-left:20px;}
								
							/* -------------------------------------------------- */
							/* --- FINE GESTIONE IMMAGINI ----------------------- */
							/* -------------------------------------------------- */	





			.privacy
			{
				position:fixed;
				
				bottom:2%;
				left:2%;
				
				width:96%;

				padding:40px;
				
				background-color:#222;
				border: solid 1px #DDD;
				opacity: 0.98;

				color:#EEE;
				text-align:justify;
				
				z-index:99;
				
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box; 				
			}









/* ---------------------------------------------- */
/* --- GESTIONE LINK SOCIAL --------------------- */
/* ---------------------------------------------- */

				#link
				{
					width:100%;
					padding:10px;
			
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box; 			
				}	
	
	
	
	
	
/* ------------------------------------- */
/* --- GESTIONE INPUT ------------------ */
/* ------------------------------------- */	
				
		.InputText, .Area
		{
			display:block;
			width:100%;
			
			margin-bottom:30px;
			
			border: solid 1px #AAA;
			border-radius:4px;
			
			font-size:18px;
		}
		.InputText{height:32px;}
	
	
		.Pulsante
		{
			width:100%;
			height:32px;
			
			font-size:18px;
			
			cursor:pointer;
			
			border-radius:4px;
		}	
	
	
	
	
	
	
	
	
	
				
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione MOBILE sotto i 980px ----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 980px) 
{





body
{
	font-size:18px;
	line-height:28px;
}





			.titoli-left
			{
				text-align:center;
			}	





/* ------------------------------------------------------ */
/* --- GESTIONE MENU e VOCI MENU ------------------------ */
/* ------------------------------------------------------ */
			#Div-Menu
			{
				left:10px;	
			}





			#VociMenu
			{
				left: 101px;	
			}		

						#VociMenu li
						{
							margin:2px 0 2px 0;
						}	





			.spaziatura-menu
			{
				height:80px;
			}


			
			
			.spazio-img{height:20px;}			
			.spazio-col{height:10px;}
			
			
			
			
/* --------------------------------------------------------- */
/* --- GESTIONE ELEMENTI PAGINE ---------------------------- */
/* --------------------------------------------------------- */
			.sezione-flex, .contenitore-flex, .colonna-flex, .colonna{display:block;}

			.sez-bottom
			{
				font-size:12px; 
				line-height:18px;
			}
				.sez-bottom titoli
				{
					font-size:14px;
					font-weight:bold;
				}			
				.sez-bottom a{font-size:13px;}




			.colonna-unica-testo, .colonna{width:100%;}		

																				
										.allineamento-t, .t-dx{text-align:justify;}
										.allineamento-dati, .allineamento-dati-dx{text-align:center;}
										
													



			.altezza-box-auto, .altezza-box{height:100%;} 
			

			.col-2, .col-3, .col-4{
									width:100%;
									max-width:1200px;
								  }







									.box-auto{position:static;}
									.box-auto:hover{padding-bottom:0;}	





							/* -------------------------------------------------- */
							/* --- GESTIONE IMMAGINI ---------------------------- */
							/* -------------------------------------------------- */
							/* --- .img ----------------------------------------- */
								.div-img-list
								{
									display:block;
									width:100%;
									max-width:100%;
									margin: 0 0 20px 0;
								}							
								.img-sx, .img-dx{
									float:none;
									width:100%;
									margin:0;
								}		
								/* div contenitore dei link immagini social */
								.div-img-link{ width:50px; }
















/* ------------------------------------- */
/* --- GESTIONE INPUT ------------------ */
/* ------------------------------------- */	





		.InputText
		{
			border: solid 1px #DDD;
			height: 36px;
			font-size: 20px;
		}			
		
		
		
		
		
		
		
		
		
}		
		
		
		






		
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione MOBILE schermi retina ----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/*and (-webkit-min-device-pixel-ratio: 2)*/
@media 
only screen and (min-resolution: 300dpi)
{
  
  
		body
		{
			font-size:36px;
			line-height:50px;
		}  

 
}










/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione OLTRE 1220 PX ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1220px) 
{
	
	
	
	
	
/* --------------------------------------------------------- */
/* --- GESTIONE ELEMENTI PAGINE ---------------------------- */
/* --------------------------------------------------------- */
			.sezione-flex
			{
				padding: 0 0 0 0;	
			}
			
				
	
	
	
}